<template>
	<view class="orders">
		<!-- 头部 -->
		<view class="top">
			<uv-tabs :list="list"
				activeStyle="color: #1d8b8c;background-color: #fff;padding: 10rpx 89rpx;border-radius: 50rpx;"
				inactiveStyle="color:#fff" lineWidth='0' @click="click" :scrollable="false"></uv-tabs>
		</view>
		<!-- 商城订单-->
		<view v-if="current== 0" class="Mallorders">
			<uv-tabs :list="list1" lineColor="#149494" activeStyle=" color:#149494" lineWidth='30' @click="click1"></uv-tabs>
			<view class="all">
				<view v-if="current1== 0" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom">
							<view class="zero-bottom-left">运费:￥0.00 合计：￥120.00</view>
							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>

				</view>
				<view v-if="current1== 1" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '待支付' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom">
							<view class="zero-bottom-left">运费:￥0.00 合计：￥120.00</view>
							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current1== 2" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '待发货' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom">
							<view class="zero-bottom-left">运费:￥0.00 合计：￥120.00</view>
							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current1== 3" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '待自提' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom">
							<view class="zero-bottom-left">运费:￥0.00 合计：￥120.00</view>
							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current1== 4" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '待收货' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom">
							<view class="zero-bottom-left">运费:￥0.00 合计：￥120.00</view>
							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current1== 5" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '已完成' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom">
							<view class="zero-bottom-left">运费:￥0.00 合计：￥120.00</view>
							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 服务订单 -->
		<view v-if="current== 1" class="Mallorders">
			<uv-tabs :list="list1" lineColor="#149494" activeStyle=" color:#149494" lineWidth='30' @click="click1"></uv-tabs>
			<view class="all">
				<view v-if="current1== 0" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom1">

							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>

				</view>
				<view v-if="current1== 1" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '待支付' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom1">

							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current1== 2" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '待发货' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom1">

							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current1== 3" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '待自提' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom1">

							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current1== 4" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '待收货' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom1">

							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current1== 5" class="zero">
					<view class="zero-all" v-for="item in list2" :key="item.id" v-show="item.name ==  '已完成' ">
						<view class="zero-top">
							<view class="zero-all-left">
								<image class="image2" src="../../static/image/狗.jpg" mode=""></image>
							</view>
							<view class="zero-all-right">
								<view class="zero-all-right1">
									<view class="productname">商品名称商品名称</view>
									<view class="paid">{{item.name}}</view>
								</view>
								<view class="specifications">规格1</view>
								<view class="price">￥125</view>
							</view>
						</view>
						<view class="zero-bottom1">

							<view @click="goDifferentpages(item.url)" class="zero-bottom-right"><uv-button shape='circle'
									color="#008c8c" type="primary" :plain="true" text="订单详情"></uv-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: '',
				current1: '',
				list2: [{
						id: 1,
						name: '待支付',
						url: '/pages/obligations/obligations'
					},
					{
						id: 2,
						name: '待发货',
						url: '/pages/shipped/shipped'
					},
					{
						id: 3,
						name: '待自提',
						url: '/pages/selfmentioned/selfmentioned'
					},
					{
						id: 4,
						name: '待收货',
						url: '/pages/receiving/receiving'
					},
					{
						id: 5,
						name: '已完成',
						url: '/pages/yiwancheng/yiwancheng'
					},
				],
				list: [{
					name: '商城订单',
				}, {
					name: '服务订单',
				}, ],
				list1: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '待发货'
				}, {
					name: '待自提'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, ]
			}
		},
		methods: {
			// 跳转不同页面
			goDifferentpages(e) {
				uni.navigateTo({
					url: e
				})
			},
			click(item) {
				this.current = item.index
				console.log('item', item);
			},
			click1(item) {
				this.current1 = item.index
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss">
	@import url("orders.css");
</style>